<template>
  <div class="dashboard-editor-container">
    <el-row>
      <el-col :span="24">
        <div id="indexHeader">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <div id="indexHeaderLfet">
                <div id="indexHeaderImg">
                  <img src="@/assets/image/profile.jpg" alt="" />
                </div>
                <h2>{{ userData.nickName }}</h2>
                <div style="color: rgba(0, 0, 0, 0.647058823529412)">
                  {{ userData.dept.deptName }}
                </div>
              </div>
            </el-col>
            <el-col :span="18" :offset="0"
              ><div id="indexHeaderRight">
                <h2>
                  今天是{{ new Date().getFullYear() }}年{{
                    new Date().getMonth() + 1
                  }}月{{ new Date().getDate() }}日，{{
                    "星期" + "日一二三四五六".charAt(new Date().getDay())
                  }}，
                </h2>
                <h2>保持好心情，愉快工作~</h2>
              </div></el-col
            >
          </el-row>
        </div>
      </el-col>
    </el-row>
    <div><index-header :headerData="headerData"></index-header></div>
    <!-- 客服模块 -->
    <div>
      <index-kefu
        :name="name"
        :caiwuErrNum="caiwuErrNum"
        :caiwuDaiNum="caiwuDaiNum"
        :YunData="YunData"
      ></index-kefu>
    </div>
    <!-- <panel-group @handleSetLineChartData="handleSetLineChartData" /> -->

    <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <line-chart :chart-data="lineChartData" />
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { selectDay } from "@/api/statistics/income";
import { list } from "@/api/finance/credit";
import { auditList } from "@/api/finance/audit";
import { status } from "@/api/station/stationList";
// 自助机分布查询
import { getCount } from "@/api/station/selfService";
// 未撤销订单数量
import { getCountNum } from "@/api/system/indexHome";
// 撤销订单
import { getPage } from "@/api/operationLog/noCancel";
// import PanelGroup from "./dashboard/PanelGroup";
// import LineChart from "./dashboard/LineChart";
// import RaddarChart from "./dashboard/RaddarChart";
// import PieChart from "./dashboard/PieChart";
// import BarChart from "./dashboard/BarChart";
import indexKefu from "./dashboard/indexKefu";
import indexHeader from "./dashboard/indexHeader";

import utils from "./js/index";

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
};

export default {
  name: "Index",
  components: {
    // PanelGroup,
    // LineChart,
    // RaddarChart,
    // PieChart,
    // BarChart,
    indexHeader,
    indexKefu,
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      userData: JSON.parse(localStorage.getItem("userData")),
      name: JSON.parse(localStorage.getItem("userData")).dept.deptName,
      headerData: [],
      params: {
        time: utils.utils.NewDateYear(
          new Date().setDate(new Date().getDate() - 1)
        ),
        qczmc: "",
      },
      caiwuData: {
        pageNum: 1,
        pageSize: 10,
        orderType: "申请退款",
        status: 0,
      },
      caiwuErr: {
        pageNum: 1,
        pageSize: 10,
        orderType: 2,
        checkStatus: 2,
      },
      caiwuErrNum: "",
      caiwuDaiNum: "",
      YunData: {
        atmErr: "",
        DuanWang: "",
        orderNum: "",
      },
    };
  },
  created() {
    this.getSelectDay();
    // this.YunWei();
    // this.CaiWu();

    switch (this.name) {
      case "财务部门":
        this.CaiWu();
        break;
      case "运维部门":
        this.YunWei();
        break;
      default:
        break;
    }
  },
  mounted() {},
  methods: {
    getSelectDay() {
      selectDay(this.params).then((res) => {
        if (res.msg) {
          this.$message.error(res.msg);
        }
      });
    },
    CaiWu() {
      this.getCaiWuErr();
      this.audit();
    },
    YunWei() {
      this.getStatusErr();
      this.getCountNumAxios();
      this.getStationNum();
    },
    getCaiWuErr() {
      list(this.caiwuErr).then((res) => {
        this.caiwuErrNum = res.total;
      });
    },
    audit() {
      auditList(this.caiwuData).then((res) => {
        this.caiwuDaiNum = res.total;
      });
    },
    // 运维部门
    getStatusErr() {
      // 自助机错误数量
      getCount().then((res) => {
        this.YunData.atmErr = res.data.errorCount;
      });
    },
    // 断网车站
    getStationNum() {
      status().then((res) => {
        this.YunData.DuanWang = res.data.error;
      });
    },
    // 未撤销订单
    getCountNumAxios() {
      getCountNum({ status: -1 }).then((res) => {
        this.YunData.orderNum = res.data;
      });
    },

    // handleSetLineChartData(type) {
    //   this.lineChartData = lineChartData[type];
    // },
  },
};
</script>

<style lang="scss" scoped>
#indexHeader {
  width: 95%;
  margin: 0 auto;
  border: 1px solid rgba(235, 235, 235, 1);
  margin-top: 20px;
  position: relative;
}
#indexHeaderLfet {
  text-align: center;
  padding: 30px 0;
  padding-left: 150px;
}
#indexHeaderRight {
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#indexHeaderImg {
  width: 150px;
  height: 150px;
  margin: 0 auto;
}
#indexHeaderImg > img {
  max-width: 100%;
  max-height: 100%;
}
</style>
